import isFunctionComponent from "./isFunctionComponent";
import mountNativeElement from "./mountNativeElement";

export default function mountComponent(vDom, container, oldDom) {
//  类组件 vs 函数式组件
  let nextVDom = null;
  if (isFunctionComponent(vDom)) {
    //  函数式组件
    nextVDom = buildFunctionComponent(vDom);
  } else {
    // 类组件
    nextVDom = buildClassComponent(vDom);
  }

  if (isFunctionComponent(nextVDom)) {
    mountComponent(nextVDom, container, oldDom);
  } else {
    // 可渲染的虚拟dom传入方法进行挂载，但是虚拟dom身上此时有一个类组件实例
    // 内部拿到类组件实例会把真实dom通过类组件实例的setDOM挂载到类组件实例化身上
    // 此时render方法就可以获取到当前类组件渲染出去的真实DOM
    mountNativeElement(nextVDom, container, oldDom);
  }
}

function buildFunctionComponent(vDom) {
  console.log(vDom.props)
  return vDom.type(vDom.props || {});
}

function buildClassComponent(vDom) {
  const component = new vDom.type(vDom.props);
  const nextVDom = component.render();
  // 把组件的实例化对象挂载到虚拟DOM的component属性上
  nextVDom.component = component;
  // 把可渲染的虚拟dom返回
  return nextVDom;
}
